<template>
  <div class="app-container">
    <h2 style="text-align: center;">发布新课程</h2>

    <el-steps
      :active="2"
      process-status="wait"
      align-center
      style="margin-bottom: 40px;">
      <el-step title="填写课程基本信息"/>
      <el-step title="创建课程大纲"/>
      <el-step title="提交审核"/>
    </el-steps>

    <el-button type="text" @click="handlerShowChapterDialog">添加章节</el-button>
    <!-- 章节 -->
    <ul class="chapternice">
      <li v-for="chapter in chapterVoList">
        <p>{{chapter.title}}
          <span class="acts">
            <el-button type="text" @click="handlerShowVideoDialog(chapter.id)">添加视频</el-button>
            <el-button type="text" @click="handlerFindChapterById(chapter.id)">编辑</el-button>
            <el-button type="text" @click="handlerDeleteChapterById(chapter.id)">删除</el-button>
          </span>
        </p>
        <!-- 视频 -->
        <ul class="chapternice videoList">
          <li v-for="video in chapter.videoVOList">
            <p>
              {{video.title}}
              <span class="acts">
            <el-button type="text" @click="handlerFindVideoById(video.id)">编辑</el-button>
            <el-button type="text" @click="handlerDeleteVideoById(video.id)">删除</el-button>
          </span>
            </p>
          </li>
        </ul>
      </li>
    </ul>

    <el-button @click="previous">上一步</el-button>
    <el-button :disabled="saveBtnDisabled" type="primary" @click="next">下一步</el-button>

    <!-- Dialog窗口: 添加和修改章节表单 -->
    <el-dialog :visible.sync="dialogChapterFormVisible" title="添加章节">
      <el-form :model="chapter" label-width="120px">
        <el-form-item label="章节标题">
          <el-input v-model="chapter.title"/>
        </el-form-item>
        <el-form-item label="章节排序">
          <el-input-number v-model="chapter.sort" :min="0" controls-position="right"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogChapterFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleChapterSubmit">确 定</el-button>
      </div>
    </el-dialog>

    <!-- Dialog：添加和修改视频表单 -->
    <el-dialog :visible.sync="dialogVideoFormVisible" title="视频维护">
      <el-form :model="video" label-width="120px">
        <el-form-item label="视频标题">
          <el-input v-model="video.title"/>
        </el-form-item>
        <el-form-item label="视频排序">
          <el-input-number v-model="video.sort" :min="0" controls-position="right"/>
        </el-form-item>
        <el-form-item label="是否免费">
          <el-radio-group v-model="video.isFree">
            <el-radio :label="0">免费</el-radio>
            <el-radio :label="1">默认</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="上传视频">
          <!-- TODO -->
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVideoFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleVideoSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

  import chapter from "@/api/chapter";
  import trainer from "@/api/trainer";
  import video from "@/api/video";

  export default {
    name: "chapter",
    data() {
      return {
        saveBtnDisabled: false,
        courseId: "",
        chapterId: "",
        chapterVoList: [],
        dialogChapterFormVisible: false,          //章节的dialog
        dialogVideoFormVisible: false,            //视频的dialog
        chapter: {},
        video: {},

      }
    },
    methods: {

      /******************* video start*********************/

      //编辑
      handlerFindVideoById(vid) {
        video.findVideoById(vid).then(resp => {
          this.video = resp.data;
          this.chapterId = this.video.chapterId;
          this.dialogVideoFormVisible = true;
        })
      },

      //删除
      handlerDeleteVideoById(vid) {
        this.$confirm('此操作将永久删除该数据, 是否继续?', '警告', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          video.removeVideoById(vid).then(resp => {
            //01 信息提示
            this.$message.success(resp.message);
            //02 数据更新
            this.initData();
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },

      handlerShowVideoDialog(cid) {
        this.dialogVideoFormVisible = true;
        this.chapterId = cid;
      },

      handleVideoSubmit() {

        //细节:  video  他有 courseId、chapterId
        //设置数据
        this.video.courseId = this.courseId;
        this.video.chapterId = this.chapterId;

        video.addVideo(this.video).then(resp => {
          //01 提示
          this.$message.success(resp.message);
          //02 关闭dialog
          this.dialogVideoFormVisible = false;
          //03 刷新
          this.initData();
          //04 清空表单
          this.video = {}
        })
      },
      /******************* end start*********************/

      /******************* chapter start*********************/
      //点击编辑查询数据 进行回显
      handlerFindChapterById(cid) {
        chapter.findChapterById(cid).then(resp => {
          //回显
          this.dialogChapterFormVisible = true;
          this.chapter = resp.data;
        });

      },
      //显示章节 对话框
      handlerShowChapterDialog() {
        this.dialogChapterFormVisible = true;
      },
      // 章节删除
      handlerDeleteChapterById(cid) {

        this.$confirm('此操作将永久删除该数据, 是否继续?', '警告', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          chapter.deleteChapterById(cid).then(resp => {
            //01 信息提示
            this.$message.success(resp.message);
            //02 数据更新
            this.initData();
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      // 章节提交
      handleChapterSubmit() {

        //需要设置 章节对应的 课程的id
        this.chapter.courseId = this.courseId;
        //提交数据
        chapter.addChapter(this.chapter).then(resp => {
          //01 信息提示
          this.$message.success(resp.message);
          //02 dialog 关闭
          this.dialogChapterFormVisible = false;
          //03 数据刷新
          this.initData();
          //04 把 chapter 的数据清空
          this.chapter = {}
        })
      },

      /******************* chapter end *********************/

      previous() {
        //路由的跳转
        this.$router.push("/course/edit/" + this.courseId);
      },
      //跳转到 发布页面
      next() {
        this.$router.push("/course/publish/" + this.courseId);
      },
      //初始化数据
      initData() {
        chapter.findChapterByCourseId(this.courseId).then(resp => {
          this.chapterVoList = resp.data;
          console.log(this.chapterVoList);
        });
      }
    },
    created() {

      //通过路由拿到参数
      let courseId = this.$route.params.courseId;
      if (courseId) {
        this.courseId = courseId;
        //查询 course 下面对应的章节信息
        this.initData();
      }
    }
  }
</script>

<style scoped>

  .chapternice {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .chapternice li {
    position: relative;
  }

  .chapternice p {
    float: left;
    font-size: 20px;
    margin: 10px 0;
    padding: 10px;
    height: 70px;
    line-height: 50px;
    width: 100%;
    border: 1px solid #DDD;
  }

  .chapternice .acts {
    float: right;
    font-size: 14px;
  }

  .videoList {
    padding-left: 50px;
  }

  .videoList p {
    float: left;
    font-size: 14px;
    margin: 10px 0;
    padding: 10px;
    height: 50px;
    line-height: 30px;
    width: 100%;
    border: 1px dotted #DDD;
  }

</style>
